<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="物品维修、更换申请单" />
    <div class="add_con">
      <div class="self_info">
        <div class="self_title_bold">基本信息</div>
        <div class="correlation_info">
          <div class="left">申请人</div>
          <div class="right">{{ detailInfo.createBy }}</div>
        </div>
        <div class="correlation_info">
          <div class="left">部门名称</div>
          <div class="right">{{ detailInfo.orgName }}</div>
        </div>
        <div class="correlation_info">
          <div class="left">申请时间</div>
          <div class="right">{{ detailInfo.createTime }}</div>
        </div>
      </div>
      <div class="con_box">
        <div class="box_head">
          <div class="head_radio">
            <van-radio-group v-model="detailInfo.repairType" direction="horizontal" disabled>
              <van-radio name="1">维修</van-radio>
              <van-radio name="2">更换</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="box_info">
          <div class="info_inpu">
            <div class="info_tit">型号：</div>
            <div class="info_input">
              <p class="pre_line" v-html="removeHtmlStyle(detailInfo.model)"></p>
            </div>
          </div>
          <div class="info_inpu">
            <div class="info_tit">事由：</div>
            <div class="info_input">
              <p class="pre_line" v-html="removeHtmlStyle(detailInfo.reason)"></p>
            </div>
          </div>
        </div>
      </div>
      <van-collapse class="check_main" v-model="activeName2" accordion>
        <van-collapse-item name="0">
          <template #title>
            <div class="type_title_bold">审批流程</div>
          </template>
          <repairSteps :approveFlow="approveFlow" />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div
      class="check_btn"
      v-if="['2', '3'].includes(userType) && detailInfo.status === '0' && queryInfo.firstType !== '0'">
      <van-button size="small" type="info" @click="approvalData('1')">通 过</van-button>
      <van-button size="small" type="danger" @click="approvalData('2')">不通过</van-button>
    </div>
    <van-dialog
      v-model="dialogShow"
      title="审批意见"
      show-cancel-button
      @confirm="submit('2')"
      @cancel="dialogShow = false"
      :before-close="onBeforeClose">
      <van-field
        type="textarea"
        v-model="suggest"
        placeholder="请输入审批意见"
        autofocus
        class="sugg"
        rows="4"
        maxlength="50"
        show-word-limit />
    </van-dialog>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { getRepairDetail, submitapproveForm } from '@api/api-dailyManage.js'
import repairSteps from './components/repairSteps.vue'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  name: 'repairDetail',
  components: {
    MyNavBar,
    repairSteps,
  },
  props: {},
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      applyType: '1',
      timeNow: moment().format('YYYY-MM-DD'),
      model: '',
      reason: '',
      queryInfo: this.$route.query,
      activeName2: '', // 审批流程
      approveFlow: {},
      userType: '0',
      detailInfo: {},
      dialogShow: false,
      suggest: '',
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isRepairRole']),
  },
  watch: {},
  created() {
    this.setTabs()
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    approvalData(type) {
      this.suggest = ''
      if (type === '2') {
        this.dialogShow = true
      } else {
        this.submit(type)
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    getRepairDetail() {
      getRepairDetail({
        id: this.$route.query.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          this.approveFlow = {
            id: this.detailInfo.id,
            processInstanceId: this.detailInfo.processInstanceId,
          }
        }
      })
    },
    setTabs() {
      if (this.isOtherRole || this.isNormalRole) {
        this.userType = '1'
      }
      if (this.isOrgRole) {
        this.userType = '2'
      }
      if (this.isRepairRole) {
        this.userType = '3'
      }
      this.getRepairDetail()
    },
    submit(type) {
      if (type === '2' && this.suggest.trim().length === 0) {
        return this.$toast.fail('请填写审批意见')
      }
      submitapproveForm({
        content: this.suggest,
        id: this.detailInfo.id,
        processInstanceId: this.detailInfo.processInstanceId,
        status: type,
        taskId: this.detailInfo.taskId,
      }).then(res => {
        if (res.code === 0) {
          this.dialogShow = false
          this.$toast.success('审批成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
    onBeforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        return done()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.add_con {
  padding: 7px 12px 60px;
  background-color: #f5f5f5;
  font-size: 13px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    .self_title_bold {
      font-weight: 800;
      font-size: 14px;
    }
    .correlation_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      .left {
        font-size: 14px;
      }
    }
  }
  .con_box {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;
    .box_head {
      .head_radio {
        // border-bottom: 1px solid #efefef;
        padding: 10px 0;
        .van-radio-group {
          // justify-content: space-around;
          .van-radio {
            margin-right: 25px;
          }
        }
      }
    }
    .box_info {
      .info_inpu {
        margin-top: 14px;
        .info_input {
          border: 1px solid #efefef;
          margin-top: 10px;
          padding: 7px;
          .scroe_input {
            padding: 0 5px;
            width: 100%;
            height: auto;
            line-height: 20px;
            font-size: 12px;
            resize: none;
          }
        }
      }
    }
  }
  .check_main {
    background-color: #ffffff;
    padding: 5px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    margin-top: 10px;
    border-radius: 5px;
    .type_title_bold {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
    }
  }
}
.check_btn {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 5px 15px;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  /deep/.van-button {
    height: 32px;
  }
}
/deep/.van-dialog__content {
  padding: 12px;
  .sugg {
    border: 1px solid #efefef;
    padding: 0 5px;
    width: 100%;
    height: auto;
    line-height: 20px;
    font-size: 12px;
    resize: none;
  }
}
</style>
